import React, { memo, useEffect, useRef, useState } from 'react'
import { ViewWrapper } from './style'
import IconArrowLeft from '@/assets/svg/icon-arrow-left'
import IconArrowRight from '@/assets/svg/icon-arrow-right'

// 滚动
const ScrollView = memo((props) => {
  // 记录左侧按钮的显示与隐藏
  const [showLeftBtn, setShowLeftBtn] = useState(false)
  // 记录右侧按钮的显示与隐藏
  const [showRightBtn, setShowRightBtn] = useState(false)
  // 滚动的索引(每次点击 + 1)
  const [posIndex, setPosIndex] = useState(0)
  const totalDistanceRef = useRef()

  // 当组件渲染完毕时,判断是否显示右侧的按钮
  const scrollContentRef = useRef()
  useEffect(() => {
    // 一共可以滚动的宽度: 包含元素的内边距,但不包括边框,外边距或垂直滚动条
    const scrollWidth = scrollContentRef.current.scrollWidth
    // 本身占据的宽度
    const clientWidth = scrollContentRef.current.clientWidth
    // 一共可以滚动的距离
    const totalDistance = scrollWidth - clientWidth
    setShowRightBtn(totalDistance > 0)
    // 记录下一共可以滚动的距离
    totalDistanceRef.current = totalDistance

    // 数据发生变化时重新执行
  }, [props.children])

  function handleRightClick() {
    const newIndex = posIndex + 1
    // 对应的元素
    const newEl = scrollContentRef.current.children[newIndex]
    // 当前元素距离最近定位父元素左侧的距离
    const newElOffsetLeft = newEl.offsetLeft
    scrollContentRef.current.style.transform = `translate(-${newElOffsetLeft}px)`
    // 记录最新的索引
    setPosIndex(newIndex)
    // 是否继续显示右边的按钮
    // 如果总共可以滚动的距离 - 已经滚动的距离 > 0,则仍然显示右侧按钮,否则不显示
    setShowRightBtn(totalDistanceRef.current > newElOffsetLeft)
    // 确定左侧按钮是否显示
    setShowLeftBtn(newElOffsetLeft > 0)
  }

  function handleLeftClick() {
    // 获取到当前显示的第一个元素的左侧一个
    const newIndex = posIndex - 1
    // 对应的元素
    const newEl = scrollContentRef.current.children[newIndex]
    // 当前元素距离最近定位父元素左侧的距离
    const newElOffsetLeft = newEl.offsetLeft
    scrollContentRef.current.style.transform = `translate(-${newElOffsetLeft}px)`
    // 记录最新的索引
    setPosIndex(newIndex)
    setShowRightBtn(totalDistanceRef.current > newElOffsetLeft)
    // 确定左侧按钮是否显示
    setShowLeftBtn(newElOffsetLeft > 0)
  }

  return (
    <ViewWrapper>
      {showLeftBtn && (
        <div className="control left" onClick={handleLeftClick}>
          <IconArrowLeft />
        </div>
      )}
      {showRightBtn && (
        <div className="control right" onClick={handleRightClick}>
          <IconArrowRight />
        </div>
      )}
      <div className="scroll">
        {/* 插槽 */}
        <div className="scroll-content" ref={scrollContentRef}>
          {props.children}
        </div>
      </div>
    </ViewWrapper>
  )
})

export default ScrollView
